<template>
	<view class="page">
		<view class="p-title">请完成以下资料上传，完成还车操作</view>
		<view class="p-upitem">
			<view class="flex-row justify-between items-center section_2">
				<view class="group_5 flex-col align-center">
					<text class="font_2">里程油表</text>
					<text class="txt">请拍照记录车辆仪表盘</text>
					<text class="txt">取车时里程和油表信息</text>
				</view>
				<image class="image_4" mode="aspectFill" :src="back_yibiao_images ? back_yibiao_images : '/static/car-li.png'"  @click="uploadImg('back_yibiao_images')" />
			</view>
		</view>
		<view class="p-upitem">
			<view class="flex-row justify-between items-center section_2">
				<view class="group_5 flex-col align-center" style="margin-left:-48rpx;">
					<text class="font_2">验车视频</text>
					<text class="txt tips">请绕车一周并确保拍摄清晰</text>
					<text class="txt tips">若由于拍摄不清晰无法定责</text>
					<text class="txt tips">相应损失由租车公司自行承担</text>
				</view>
				<image class="image_4" mode="aspectFill" src="/static/car-video.png" @click="uploadVideo" v-if="!back_carvideo" />
				<view v-else class="video-wrap">
					<video class="image_4" :src="back_carvideo" />
					<image class="upload-del-btn"
						@click="delVideo()" 
						src="" 
						mode="scaleToFill">
					</image>
				</view>
			</view>
		</view>
		<view class="p-form">
			<view class="flex-col section_3">
				<view class="flex-row justify-between group_7" @click="showHack">
					<text class="font_2">车伤确认</text>
					<view class="flex-row items-center space-x-9">
						<text class="font_4 clamp" :class="{'active': configsChecked.length > 0}">{{configsChecked.length > 0 ? showHackTxt() : '请选择'}}</text>
						<image
							class="shrink-0 image_5"
							src="/static/msg-r.png"
						/>
					</view>
				</view>
				<view class="flex-col">
					<view class="flex-row group_8" @click="showDatetime">
						<text class="font_2">实际还车时间</text>
						<picker mode="date" @change="onDate" class="justify-end" style="flex:1;">
							<view class="flex-row justify-end space-x-9  datetime-item">
								<!-- active -->
								<text class="font_4" :class="{active: dateStr}">{{dateStr ? dateStr : '请选择日期'}}</text>
								<image
									class="shrink-0 image_5"
									src="/static/msg-r.png"
								/>
							</view>	
						</picker>
						
						<picker mode="time"  @change="onTime" class="justify-end" style="flex:1;">
							<view class="flex-row justify-end space-x-9  datetime-item">
								<!-- active -->
								<text class="font_4" :class="{active: timeStr}">{{timeStr ? timeStr : '请选择时间'}}</text>
								<image
									class="shrink-0 image_5"
									src="/static/msg-r.png"
								/>
							</view>
						</picker>
						
					</view>
					<view class="align-center justify-between group_9">
						<text class="font_2">油费退款</text>
						<input type="digit" class="inpt" placeholder="请输入" v-model="back_oilfee" />
					</view>
					<view class="align-center justify-between group_9">
						<text class="font_2">备注</text>
						<input type="text" class="inpt" placeholder="请输入" v-model="back_remark" />
					</view>
				</view>
			</view>
		</view>

		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{ isSubmitted }">
				<view class="p-btn" :class="{ disabled: isSubmitted }">完成还车</view>
			</template>
		</submit-btn>
		<!-- <dateTime ref="datetimeRef" default="start" :start="startDatetime" :end="endDatetime" @rundata="getDatetime" /> -->
		<popup ref="hackRef" :isStopMaskHide="false" type="bottom">
			<view class="hackRef-panel flex-col">
				<scroll-view scroll-y="true" class="scroll">
					<view class="s-item align-center" v-for="(item,i) in configs" :key="i" @click="selectHack(item)">
						<image :src="includeItem(configsTemp,item.id) ? '/static/apply-checked.png' : '/static/apply-checkun.png'" mode="aspectFill" class="ic"></image>
						<text class="txt">{{item.name}}</text>
					</view>
				</scroll-view>
				<view class="btn" @tap="confirmReply">确定</view>
			</view>
		</popup>
	</view>
</template>

<script lang="ts">
import {
	reactive,
	toRefs,
	defineComponent,
	ref
	// watchEffect,
} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// import dateTime from '@/components/kx-datetime.vue';
const msgReturnCar = defineComponent({
	// components: {
	// 	dateTime
	// },
	props: {},
	setup(props: any, ctx: any) {
		const data = reactive({
			orderid:'',
			
			back_yibiao_images:'',
			back_carvideo:'',
			
			
			configs:[],
			configsTemp:[],
			configsChecked:[],
			
			// startDatetime: '', //用于选择时间 Y-m-d H:i
			// endDatetime: '',
			// newEndtime:'',
			// new_endtime: '' ,//还车时间戳
			dateStr:'',
			timeStr:'',
			
			back_oilfee:'',
			back_remark:'',
			
			
		});
		// watchEffect(()=>{
		// })
		onLoad(e => {
			data.orderid = e.orderid;
            getConfigs();
			// let curHour = new Date().getHours();
			// let rentHour = curHour;
			// let curTimestamp = Date.parse(new Date());
			// let date = new Date(curTimestamp);
			// date.setMonth(date.getMonth()-3);
			// date.setHours(rentHour);
			// date.setMinutes(0);
			// date.setSeconds(0);
			// data.startDatetime = uni.$tools.date('Y-m-d H:i', Date.parse(date));
			// let endDate = new Date(curTimestamp);
			// endDate.setMonth(endDate.getMonth() + 6, 1);
			// endDate.setHours(rentHour);
			// endDate.setMinutes(0);
			// endDate.setSeconds(0);
			// data.endDatetime = uni.$tools.date('Y-m-d H:i', Date.parse(endDate));
		});
		const getConfigs = async ()=>{
			const res = await uni.$request('order.back_config');
			data.configs = res.data;
		}
		
		const uploadImg = async key => {
			const fullurl = await uni.$tools.uploadImg();
			data[key] = fullurl;
		};
		const uploadVideo = async (formData={}) =>{
			const fullurl = await uni.$tools.uploadVideo();
			data.back_carvideo = fullurl;
		}
		const delVideo = ()=>{
			data.back_carvideo = '';
		}
		
		//选择还车时间
		const onTime = (e)=>{
		  data.timeStr = e.detail.value;
		  const datetime = data.dateStr + ' '+ data.timeStr;
		  let backcartime = new Date(datetime.replace(/-/g, '/')).getTime()/1000;
		  console.log("datetime===",backcartime)
		}
		const onDate = (e)=>{
		  data.dateStr = e.detail.value;
		}
		// const datetimeRef = ref();
		// const getDatetime = async e => {
		// 	// console.log("getDatetime==",e); //2023-01-07 17:00
		// 	let datetime = e;
		// 	data.newEndtime=e;
		// 	let _datetime = datetime.replace(/-/g, '/');
		// 	let new_endtime = new Date(_datetime).getTime() / 1000;
		// 	data.new_endtime = new_endtime;
		// };
		// const showDatetime = () => {
		// 	datetimeRef.value.open();
		// };
		

        //判断是否包括
		const includeItem=(arr,id)=>{
			return arr.some(a=> a.id === id);
		}
		//点击选择车伤
		const hackRef = ref();
		const showHack = () => {
			data.configsTemp = data.configsChecked;
			hackRef.value.show();
		};		
		const selectHack = (item)=>{
			if(includeItem(data.configsTemp,item.id)){
				data.configsTemp = data.configsTemp.filter(c => c.id !== item.id);
			}else{
				data.configsTemp.push(item);
			}
		}
		const confirmReply = ()=>{
			data.configsChecked = data.configsTemp;
			data.configsTemp = [];
			hackRef.value.hide();
			// console.log("data.configsChecked==",data.configsChecked)
		}
		const showHackTxt =()=>{
			let arrtxt = [];
			arrtxt = data.configsChecked.map(c=> c.name );
			return arrtxt.join(',');
		}
		
		
		const submitRef = ref();
		const submit = async () => {
			if(! uni.$tools.match( data.back_yibiao_images,'nonull','请拍照记录车辆仪表盘')){
			    return;
			}
			if(! uni.$tools.match( data.back_carvideo,'nonull','请上传验车视频')){
			    return;
			}
			
			
			let back_damage ='';
			if(data.configsChecked.length > 0){
				back_damage = showHackTxt();
			}
			
			if(!data.dateStr  || !data.timeStr){
				uni.$tools.msg('请选择还车日期时间')
				return;
			}
			const datetime = data.dateStr + ' '+ data.timeStr;
			
			
			let backcartime = new Date(datetime.replace(/-/g, '/')).getTime()/1000;
			
			const sendData={
			   id: data.orderid, 
			   back_yibiao_images: data.back_yibiao_images,
			   back_carvideo: data.back_carvideo,
			   back_remark: data.back_remark,
			   backcartime,
			   back_oilfee: data.back_oilfee,
			   back_damage,
			}
			let res = await uni.$request('order.back_car',sendData);
			submitRef.value.chgeStatus();
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.$this.goBack();
			},800)
		};
		return {
			...toRefs(data),
			// datetimeRef,
			// showDatetime,
			// getDatetime,
			onTime,
			onDate,
			
			hackRef,
			showHack,
			includeItem,
			selectHack,
			confirmReply,
			showHackTxt,
			
			uploadImg,
			uploadVideo,
			delVideo,
			
			submitRef,
			submit,
		};
	}
});
export default msgReturnCar;
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.page {
	padding-bottom: 30rpx;
}
.datetime-item{
	width: 100%;
}
.video-wrap{
	position: relative;
	.upload-del-btn{
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		z-index: 2;
		width: 36rpx;
		height: 36rpx;
	}
}
.p-title {
	height: 65rpx;
	padding: 0 30rpx;
	line-height: 65rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}
.p-upitem {
	padding: 0 30rpx;
	.section_2 {
		padding: 40rpx 39rpx 40rpx 74rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto 24rpx;
		.group_5 {
			margin-left: -30rpx;
			.font_2 {
				line-height: 37rpx;
				font-size: 28rpx;
				font-family: PingFang;
				line-height: 37rpx;
				color: #333333;
			}
			.txt {
				width: 285rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #a6a6a6;
				line-height: 32rpx;
			}
			.tips {
				width: 288rpx;
			}
		}
		.image_4 {
			width: 313rpx;
			height: 201rpx;
			border-radius: 10rpx;
		}
	}
}
.p-btn {
	margin: 10rpx auto 0;
	width: 670rpx;
	height: 84rpx;
	background: #256ae5;
	border-radius: 84rpx;
	line-height: 84rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	&.disabled {
		background-color: #eee;
	}
}
.p-form {
	padding: 0 30rpx;
	margin-bottom: 60rpx;
	.section_3 {
		background-color: #ffffff;
		border-radius: 20rpx;
		.group_7 {
			padding: 40rpx 30rpx 40rpx 33rpx;
			border-bottom: solid 2rpx #0000000f;
		}
		.group_8 {
			padding: 40rpx 29rpx 40rpx 32rpx;
			border-bottom: solid 2rpx #0000000f;
		}
		.font_2 {
			font-size: 28rpx;
			font-family: PingFang;
			color: #333333;
		}
		.font_4 {
			font-size: 28rpx;
			font-family: PingFang;
			color: #999999;
			max-width: 400rpx;
			&.active {
				color: #333;
			}
		}
		.space-x-9 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 9rpx;
			}
			.image_5 {
				width: 10rpx;
				height: 18rpx;
			}
		}
		.group_9 {
			padding: 0 32rpx;
			.inpt {
				margin-right: 15rpx;
				height: 106rpx;
				line-height: 106rpx;
				font-size: 28rpx;
				color: #333;
				text-align: right;
			}
		}
	}
}
.hackRef-panel{
	padding: 10rpx 30rpx;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	.scroll{
		width: 100%;
		min-height: 30vh;
		max-height: 70vh;
		.s-item{
			border-bottom: 2rpx solid #eee;
			height: 70rpx;
			&:last-child{
				border: none;
			}
			.ic{
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
			.txt{
				font-size: 28rpx;
				color:#333;
			}
		}
	}
	.btn{
		margin: 10rpx auto 0;
		width: 670rpx;
		height: 84rpx;
		background: #256ae5;
		border-radius: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		&.disabled {
			background-color: #eee;
		}
	}
}

</style>
